﻿<!DOCTYPE HTML>
<html>
{include file="public:header_css"}
<body>
<nav class="breadcrumb">
	<i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 排课管理 <span class="c-gray en">&gt;</span> 排课列表
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
	<div action="" method="post" class="form form-horizontal" id="form-shops-add" enctype="multipart/form-data">
		<div class="row cl">
			<div style="margin-left: 50px;">
				<div  style="margin-left: 80px;margin-top: 20px;">
					<input type="checkbox" id="CheckWorkday" value="" onclick="checkboxOnclick(this)"/>&nbsp;工作日&nbsp;&nbsp;&nbsp;
					<input type="checkbox" id="CheckWeekend" value="" onclick="checkboxOnclick(this)"/>&nbsp;周末&nbsp;&nbsp;&nbsp;
				</div>
				<div style="margin-left: 45px;">星期</div>
				<div  style="margin-left: 80px;">
					<input type="checkbox" name="items" value="1" id="Monday"/>星期一&nbsp;&nbsp;&nbsp;
					<input type="checkbox" name="items" value="2" id="Tuesday"/>星期二&nbsp;&nbsp;&nbsp;
					<input type="checkbox" name="items" value="3" id="Wednesday"/>星期三&nbsp;&nbsp;&nbsp;
					<input type="checkbox" name="items" value="4" id="Thursday"/>星期四&nbsp;&nbsp;&nbsp;
					<input type="checkbox" name="items" value="5" id="Friday"/>星期五&nbsp;&nbsp;&nbsp;
					<input type="checkbox" name="items" value="6" id="Saturday" />星期六&nbsp;&nbsp;&nbsp;
					<input type="checkbox" name="items" value="0" id="Sunday"/>星期日&nbsp;&nbsp;&nbsp;
					<input type="button" value="&nbsp;点击确定&nbsp;" id="xuan" style="width: 80px;height: 25px;background-color: #5a98de;color: white;border: none">
				</div>
			</div>
		</div>
		<div class="mt-20">
			<table class="table table-border table-bordered table-bg table-sort">
				<thead>
				<tr class="text-c">
					<th width="60">星期</th>
					<th width="150">时段</th>
					<th width="100">课程名称</th>
					<th width="100">具体班级</th>
					<th width="100">选择教师</th>
					<th width="100">操作</th>
				</tr>
				</thead>
				<tbody id="arrangeList">
				{foreach name="week_arr" item="val" key="key"}
				<tr class="text-c" id="xq{$key}">
					<td id="xqname{$key}">{$val}</td>
					<td>
						<select style="border: none;" id="time{$key}">
							{foreach name="period_list" item="v" key="k"}
							<option value="{$v['id']}">{$v['time']}</option>
							{/foreach}
						</select>
					</td>
					<td>{$courses_info['course_name']}</td>
					<td>
						<select style="border: none;" id="class{$key}">
							{foreach name="classes_list" item="v" key="k"}
							<option value="{$v['class_id']}">{$v['class_name']}</option>
							{/foreach}
						</select>
					</td>
					<td>
						<select style="border: none;" id="teacher{$key}">
							{foreach name="teacher_list" item="v" key="k"}
							<option value="{$v['teacher_id']}">{$v['teacher_name']}</option>
							{/foreach}
						</select>
					</td>
					<td>
						<input class="btn btn-primary radius" type="button" id="tianjia" onclick="add_time('{$key}')" value="&nbsp;&nbsp;添加&nbsp;&nbsp;">
					</td>
				</tr>
				{/foreach}
				</tbody>
			</table>
		</div>

		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-6 col-sm-offset-5" style="margin-top: 20px">
				<input type="hidden" value="{$courses_info['course_id']}" id="course_id">
                <button class="btn btn-primary radius" type="submit" id="submit">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
				<a class="btn btn-warning radius"  onclick="cancel()">&nbsp;&nbsp;取消&nbsp;&nbsp;</a>
			</div>
		</div>

	</div>
</div>

{include file="public:footer_js"}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">

    //默认先不展示列表
    $(function(){
        for (var i=0;i<7;i++){
            $("#xq"+i).hide();
        }
    });

    //选中的时间的方法
    function check(start,end,flag) {
        for (var i=start;i<end;i++) {
            $('input:checkbox').eq(i).prop('checked',flag);
        }
    }
    function checkboxOnclick(checkbox){
        if (checkbox.id == 'CheckWorkday') {
            if ( checkbox.checked == true){
                check(2,7,true);
            }else{
                check(2,7,false);
            }
        }else if(checkbox.id == 'CheckWeekend'){
            if ( checkbox.checked == true){
                check(7,9,true);
            }else{
                check(7,9,false);
            }
        }
    }

    //获取选中复选框的值
    $("#xuan").click(function(){
        //每次请求都先清除
        for (var i=0;i<7;i++){
            $("#xq"+i).hide();
        }
        //监听按钮
        $.each($('input:checkbox'),function(){
            if(this.checked){
                $("#xq"+$(this).val()).show();
            }
        });
    });

    //定义全局变量
    var temp_time = [];
    var arrange_time = [];
    var arrange_time2 = [];

    //添加元素
    function add_time(id) {
		//星期几id
        var week_day = id;
		//星期几文字
        var xqname = $("#xqname"+id).text();

        //时间段的id
        var time_id = $("#time"+id).val();
        //时间段的具体数据
        var timename = $('#time'+id).find("option:selected").text();

        //班级的id
        var class_id = $("#class" + id).val();
        //选择班级数据
        var class_name = $('#class' + id).find("option:selected").text();

        //教师id
        var teacher_id = $("#teacher" + id).val();
        //教师数据
        var teacher_name = $('#teacher' + id).find("option:selected").text();

        //拼接星期和时间段和班级名,进行数据库的比对是否重复添加
        var arrange_item  = week_day+"&"+time_id+"&"+class_id;
        //拼接星期和时间段,进行本页面的比对是否重复添加相同时间
        var arrange_item1 = week_day+"&"+time_id;
        //拼接星期和时间段和教师,进行数据库的比对是否重复
        var arrange_item2  = week_day+"&"+time_id+"&"+teacher_id;

        // 异步提交数据
        $.post(
            "{:url('collision_detection')}",
			{arrange_item : arrange_item,arrange_item2:arrange_item2},
			function (res) {
                if(res.code === 0){
                    //该班级已经被占用了
                    layer.msg(res.msg,{icon:5,time:2000});
                }else{
                    if (($.inArray(arrange_item1,temp_time))!=-1){
                        layer.msg('该课程本时间段已排~',{icon:6,time:2000});
                        return;
                    }else {
                        //数组添加元素
                        temp_time.push(arrange_item1);
                        arrange_item=arrange_item+"&"+teacher_id;
                        arrange_time.push(arrange_item);
                        //该教师可授课
                        $("#arrangeList").append("<tr class=\"text-c\" >" +
                            "<td>"+xqname+"</td>" +
                            "<td>"+timename+"</td>" +
                            "<td>~</td>" +
                            "<td>"+class_name+"</td>" +
                            "<td>"+teacher_name+"</td>" +
                            "<td>"+"<button class=\" remove btn btn-warning radius\" id="+arrange_item+" value="+arrange_item1+" onclick='remove(this)'>&nbsp;&nbsp;移除&nbsp;&nbsp;</button>" + "</td>" +
                            "</tr>");
                        layer.msg('添加成功！',{icon:6,time:1000});
					}
                }
            }
        );

    }

    //移除元素
    function remove(obj) {
        layer.confirm('确定移除吗？', function(){
            arrange_time.splice($.inArray(obj.id,arrange_time),1);
            temp_time.splice($.inArray(obj.value,temp_time),1);
			var tr =obj.parentNode.parentNode;
            var tbody= tr.parentNode;
            tbody.removeChild(tr);
            layer.msg('移除成功！',{icon:6,time:1000});
        });
    }

    //取消本次保存操作
    function cancel(){
        layer.open({
            title: ['温馨提示'],
            content: '<div style="color:black">确定取消本次操作吗？</div>',
            btn: ['确定', '取消'],
            yes: function(index, layero){
                self.location="{:url('course/index')}";
            },
            cancel: function(index,layero){
            },

        });
    }

    //异步提交
    $("#submit").click(function(){
		//判断是否有需要添加的数据
        if ($.trim($(".remove").val()).length>0){
            var course_id      = $("#course_id").val();
            //异步提交
            $.ajax({
                type:"POST",
                url:"{:url('add')}",
                data:{
                    course_id      : course_id,
                    arrange_time   : JSON.stringify(arrange_time),
                },
                async:true,
                success:function (res) {
                    if(res.code === 0){
                        layer.msg(res.msg,{icon:5,time:2000});
                    }else{
                        layer.msg(res.msg,{icon:6,time:2000});
                        // 定时跳转页面
                        setTimeout(
                            function(){
                                location.replace("{:url('course/index')}");
                            },
                            3000);
                    }
                }
            });

		}else {
            layer.alert('您还没有添加任何排课哦~', {icon: 6});
        }
    });
</script>
</body>
</html>